<script setup>
import { reactive } from 'vue'

import { listUser } from '@/api/system/user.js'
const userList = ref([])
const getUser = async () => {
  const res = await listUser({ pageNum: 1, pageSize: 999 })
  userList.value = res.rows.map(item => ({
    label: item.userName,
    value: item.userId
  }))
}
getUser()
const { proxy } = getCurrentInstance()

// 封装 方法 字典查询
const {
  converter_level, // 等级
  customer_affiliated_organization //所属机构
} = proxy.useDict('converter_level', 'customer_affiliated_organization')

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: {}
  },
  // 是否为审核
  examine: {
    type: Boolean,
    default: false
  },
  // 是否显示关结
  reviewComments: {
    type: Boolean,
    default: false
  }
})

const ruleFormRef = ref(null)
const ruleForm = reactive({
  affiliatedOrganization: '', // 所属机构
  supplierName: '', // 供应商名称
  supplierAbbreviation: '', // 供应商简称
  supplierLevel: '', // 供应商等级
  supplierAddress: '', // 供应商地址
  contactsBy: '', // 联系人
  contactsInformation: '', // 联系方式
  ascriptionBy: '', // 归属人
  invoicingInformation: '', // 开票信息
  businessLicense: '', // 营业执照

  remark: '' // 备注
})

// 校验枚举
const checkAge = (rule, value, callback) => {
  // console.log(!/[A-Z]/.test(value))
  if (!(/[A-Z]/.test(value) && value.length === 4)) return callback(new Error('只能为4位大写字母'))
  callback()
}

const rules = reactive({
  affiliatedOrganization: [{ required: true, message: '请选择所属机构', trigger: 'change' }],
  supplierName: [{ required: true, message: '请填写客户名称', trigger: 'blur' }],
  supplierAbbreviation: [
    { required: true, message: '请填写客户简称', trigger: 'blur' },
    { validator: checkAge, trigger: 'blur' }
  ],
  supplierLevel: [{ required: true, message: '请选择客户等级', trigger: 'change' }],
  // supplierAddress: [{ required: true, message: '请选择客户地址', trigger: 'change' }],
  reviewComments: [{ required: true, message: '请填写审核意见', trigger: 'blur' }],
  contactsBy: [{ required: true, message: '请填写联系人', trigger: 'blur' }]
  // ascriptionBy: [{ required: true, message: '请选择归属人', trigger: 'change' }]
  // businessLicense: [{ required: true, message: '请上传开票信息', trigger: 'change' }],
  // invoicingInformation: [{ required: true, message: '请上传营业执照', trigger: 'change' }]
})

// 回显
if (props.data?.id) {
  for (let Key in props.data) {
    ruleForm[Key] = props.data[Key]
  }
  ruleForm.ascriptionBy = Number(ruleForm.ascriptionBy)
}

const submit = async () => {
  const valid = await ruleFormRef.value.validate()
  if (!valid) return
  return new Promise(async (resolve, reject) => {
    if (!valid) return reject(false)
    resolve(ruleForm)
  })
}

defineExpose({ submit })
</script>

<template>
  <el-form
    ref="ruleFormRef"
    class="demo-ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    label-position="right"
    status-icon
  >
    <div class="box">
      <div class="left">
        <div style="width: 60%">
          <!-- <el-form-item label="所属机构" prop="affiliatedOrganization">
            <el-select
              v-model="ruleForm.affiliatedOrganization"
              clearable
              :disabled="props.disabled"
              placeholder="请选择所属机构"
            >
              <el-option
                v-for="(item, index) in customer_affiliated_organization"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->

          <el-form-item label="供应商名称" prop="supplierName">
            <el-input
              clearable
              :disabled="props.disabled"
              v-model="ruleForm.supplierName"
              placeholder="请填写客户名称"
            />
          </el-form-item>
          <el-form-item label="供应商简称" prop="supplierAbbreviation">
            <el-input
              clearable
              :disabled="props.disabled"
              v-model="ruleForm.supplierAbbreviation"
              placeholder="请填写客户简称"
            />
          </el-form-item>
          <el-form-item label="供应商等级" prop="supplierLevel">
            <el-select
              v-model="ruleForm.supplierLevel"
              clearable
              :disabled="props.disabled"
              placeholder="请选择客户等级"
            >
              <el-option
                v-for="(item, index) in converter_level"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商地址" prop="supplierAddress">
            <el-input
              clearable
              :disabled="props.disabled"
              v-model="ruleForm.supplierAddress"
              placeholder="请填写客户地址"
            />
          </el-form-item>
          <el-form-item label="联系人" prop="contactsBy">
            <el-input clearable :disabled="props.disabled" v-model="ruleForm.contactsBy" placeholder="请填写联系人" />
          </el-form-item>
          <el-form-item label="联系方式" prop="contactsInformation">
            <el-input
              clearable
              :disabled="props.disabled"
              v-model="ruleForm.contactsInformation"
              placeholder="请填写联系方式"
            />
          </el-form-item>

          <el-form-item label="归属人" prop="ascriptionBy">
            <el-select
              filterable
              v-model="ruleForm.ascriptionBy"
              clearable
              :disabled="props.disabled"
              placeholder="请选择归属人"
            >
              <el-option v-for="(item, index) in userList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <!-- <el-form-item label="关结原因" prop="reviewComments" v-if="props.reviewComments">
          <el-input
            autosize
            clearable
            v-model="ruleForm.reviewComments"
            :disabled="props.disabled"
            :rows="2"
            type="textarea"
            placeholder="请输入关结原因"
            :input-style="{ width: '100%' }"
          />
        </el-form-item> -->
      </div>
      <div class="right">
        <el-form-item label="开票信息" prop="invoicingInformation">
          <ImageUpload v-model="ruleForm.invoicingInformation" v-if="!props.disabled" />
          <ImagePreview width="146px" height="146px" :src="ruleForm.invoicingInformation" v-else />
        </el-form-item>
        <el-form-item label="营业执照" prop="businessLicense">
          <ImageUpload v-model="ruleForm.businessLicense" v-if="!props.disabled" />
          <ImagePreview width="146px" height="146px" :src="ruleForm.businessLicense" v-else />
        </el-form-item>
        <el-form-item label="文件上传">
          <DownloadFile :fileList="[ruleForm.filePath]" v-if="props.disabled" />
          <FileUpload v-model="ruleForm.filePath" v-else />
        </el-form-item>
        <!-- <el-form-item label="文件上传111">
          <p-fileUpload v-model="ruleForm.filePath1" />
        </el-form-item> -->
      </div>
    </div>
    <div class="rk">
      <el-form-item label="备注" prop="remark">
        <el-input
          :disabled="props.disabled"
          autosize
          clearable
          v-model="ruleForm.remark"
          :rows="2"
          type="textarea"
          placeholder="请输入备注"
          :input-style="{ width: '100%' }"
        />
      </el-form-item>
    </div>
    <div class="rk">
      <el-form-item label="审核意见" prop="reviewComments" v-if="props.examine">
        <el-input
          autosize
          clearable
          v-model="ruleForm.reviewComments"
          :rows="2"
          type="textarea"
          placeholder="请输入审核意见"
          :input-style="{ width: '100%' }"
        />
      </el-form-item>
    </div>
  </el-form>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  display: flex;
  justify-content: center;
  .right {
    flex: 1;
  }
  .left {
    flex: 1;
    display: flex;
    justify-content: center;
  }
}
</style>
